<template>
	<view class="components_goods_c">
		<view class="image">
			<fr-image :src="image" lazy-load mode="aspectFill" />
		</view>
		<view class="right_content">
			<view class="name one-line">{{ name }}</view>
			<view class="sub_name one-line">{{ sub_name }}</view>
			<!--默认内容插槽-->
			<slot></slot>
			<!--右侧底部栏-->
			<view class="components_bottom_c">
				<slot name="bottom">
					<!--插槽默认dom-->
					<view class="bottom">
						<view class="price">
							<view class="now_price">
								<text>￥</text>
								<text class="num">{{ price_integer }}</text>
								<text>.{{ price_decimal }}</text>
							</view>
							<text v-if="origin_price" class="origin_price">￥{{ origin_price }}</text>
						</view>
						<view class="nums">x{{ num }}</view>
					</view>
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps({
		image_width: String,
		image_height: String,
		name: String,
		sub_name: String,
		image: String,
		price_integer: {
			type: [String, Number],
		},
		price_decimal: {
			type: [String, Number],
		},
		origin_price: {
			type: [String, Number],
		},
		num: {
			type: [String, Number],
		},
		price_color: String,
		image: {
			type: String,
			default: '@/static/image/none-img.jpg'
		},
		show_origin_price: {
			type: Boolean,
			default: false
		},
		price_color: {
			type: String,
			default: '#333'
		},
	});
</script>

<style scoped lang="scss">
	.components_goods_c {
		display: flex;
		background-color: #fff;

		.image {
			flex-shrink: 0;
			width: v-bind(image_width);
			height: v-bind(image_height);
			border-radius: 10px;
			overflow: hidden;
		}

		.right_content {
			flex: 1;
			display: flex;
			flex-direction: column;
			padding-left: 10px;

			.name {
				font-size: 16px;
			}

			.sub_name {
				margin: 2px 0;
				color: #999;
			}

			.components_bottom_c {
				flex: 1;
			}

			.bottom {
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				height: 100%;

				.price {
					flex: 1;
					display: flex;
					align-items: center;
				}

				.now_price {
					font-size: 12px;
					font-weight: bold;
					color: v-bind(price_color);

					.num {
						font-size: 16px;
					}
				}

				.origin_price {
					margin-left: 8px;
					font-size: 12px;
					color: #999;
					text-decoration: line-through;
				}

				.nums {
					font-weight: bold;
				}
			}
		}
	}
</style>
